@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base{
	:root{
	  --kline-green: #2EAF70;
	  --kline-green-bg: #2EAF7025;
	  --kline-green-hover: #2EAF70B2;
	  --kline-red: #E34949;
	  --kline-red-bg: #E3494925;
	  --kline-red-hover: #E34949B2;
	  --primary-color: #FE7701;
	  --primary-color-bg: #FE770126;
	  --primary-color-hover: #FE7701B2;
	  --orange-red: #FD8888;
	  --pink: #FF52BF;
	  --link-color: #2196F3;
	  --link-color-hover: #2F6AB3;
	  --purple: #9D65C9;
	  --green: #00FFFF;
	  --blue-grey: #C5D9F2;
	  --deep-red: #B54537;
	  --sandybrown: #DB8442;
	  --ultramarine: #01C5C4;
	  --greenish-yellow: #B5BD68;
	  --white: #FFFFFF;
	  --black: #000000;
	  --scrollbar-thumb: #e6e6e6;

	  --primary-color-opacity1:rgba(254,119,1,0.1);

	  --otc-cont-bg: #F6F6F6;
	  --otc-inp-bg: #F3F4F6;
	  --otc-tab-bor:#E7E7E7;
	  --otc-nav-active: #292929;
	  --otc-nav-bg: #141414;

	}
	:root body.dark {
	  --text-color-level1: #EBEBEB;
	  --text-color-level2: #7A7E84;
	  --text-color-level3: #56595E;
	  --text-color-level4: #484848;
	  --icon-color: #DEDEDE;
	  --line-color: #292929;
	  --btn-bg-color: #3A3A3A;
	  --bg-color: #141414;
	  --module-split-color: #0D0D0D;
	  --dialog-bg-color: #1B1B1B;
	  --dialog-shadow-color: #101010;
	  --dialog-btn-bg-color: #292929;
	  --kline-green-hover-bg:  #224232;
	  --kline-red-hover-bg:  #4D2727;
	  --primary-color-bg-pure: #2A1D11;
	}
	:root body.light {
	  --text-color-level1: #000000;
	  --text-color-level2: #7A7E84;
	  --text-color-level3: #9F9F9F;
	  --text-color-level4: #D1D1D1;
	  --icon-color: #484848;
	  --line-color: #E7E7E7;
	  --btn-bg-color: #EBECEE;
	  --bg-color: #FFFFFF;
	  --module-split-color: #FFFFFF;
	  --dialog-bg-color: #FFFFFF;
	  --dialog-shadow-color: #00000014;
	  --dialog-btn-bg-color: #F3F4F6;
	  --kline-green-hover-bg:  #E1FAEE;
	  --kline-red-hover-bg:  #FAE1E1;
	  --primary-color-bg-pure: #FEF1E5;
	}
	:root body.dark.upDownColorStatus2{
	  --kline-green-hover-bg:  #224232;
	  --kline-red-hover-bg:  #4D2727;
	}
	:root body.light.upDownColorStatus2{
	  --kline-green-hover-bg:  #E1FAEE;
	  --kline-red-hover-bg:  #FAE1E1;
	}
	:root body.dark.upDownColorStatus1{
	  --kline-green-hover-bg:  #4D2727;
	  --kline-red-hover-bg:  #224232;
	}
	:root body.light.upDownColorStatus1{
	  --kline-green-hover-bg:  #FAE1E1;
	  --kline-red-hover-bg:  #E1FAEE;
	}
}